<template>
  <div class="container">
    <div class="card" v-loading="loading">
      <div class="top flexBet flexColCenter">
        <div class="topT">{{ $route.query.disciplineGroupName }}</div>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="handelEdit()"
        >
          编辑
        </el-button>
      </div>
      <div class="commonMenu">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">课程</el-menu-item>
          <el-menu-item index="2">资料</el-menu-item>
          <el-menu-item index="3">成员</el-menu-item>
        </el-menu>
      </div>

      <!-- 列表 -->
      <div class="list">
        <disciplineGroupDetailCourse
          :activeIndex="activeIndex"
          v-if="activeIndex == 1"
        ></disciplineGroupDetailCourse>
        <disciplineGroupDetailFile
          :activeIndex="activeIndex"
          v-if="activeIndex == 2"
        ></disciplineGroupDetailFile>
        <disciplineGroupDetailUser
          :activeIndex="activeIndex"
          v-if="activeIndex == 3"
        ></disciplineGroupDetailUser>
        <addDisciplineGroupDialog
          :open.sync="addOpen"
          type="edit"
          :id="$route.query.disciplineGroupId"
          :branch="branch"
          @refreshCommon="refresh"
        ></addDisciplineGroupDialog>
      </div>
    </div>
  </div>
</template>

<script>
import addDisciplineGroupDialog from './components/addDisciplineGroupDialog.vue'
import disciplineGroupDetailUser from './components/disciplineGroupDetailUser.vue'
import disciplineGroupDetailFile from './components/disciplineGroupDetailFile.vue'
import disciplineGroupDetailCourse from './components/disciplineGroupDetailCourse.vue'

export default {
  components: {
    addDisciplineGroupDialog,
    disciplineGroupDetailUser,
    disciplineGroupDetailCourse,
    disciplineGroupDetailFile
  },
  data() {
    return {
      queryParams: {
        courseName: ''
      },
      activeIndex: '1',
      loading: false,
      addOpen: false,
      branch: {}
    }
  },
  mounted() {
    this.branch = {
      branchName: this.$route.query.branchName
    }
  },
  methods: {
    refresh(item) {
      console.log(item)
      // 重定向
      this.$router.push({
        path: '/schoolOrganization/disciplineGroupDetail',
        query: {
          disciplineGroupId: this.$route.query.disciplineGroupId,
          disciplineGroupName: item.disciplineGroupName,
          branchName: this.$route.query.branchName
        }
      })
    },
    handelEdit() {
      this.addOpen = true
    },
    handleSelect(key) {
      console.log(key)
      this.activeIndex = key
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  color: #11a983 !important;
}

::v-deep .el-menu--horizontal > .el-menu-item:hover {
  color: #11a983 !important;
  border-bottom: 1px solid #e6e6e6 !important;
}

::v-deep .el-menu.el-menu--horizontal {
  padding-left: 32px;
}

::v-deep.commonMenu .el-menu .el-menu-item {
  padding: 0 33px;
}

.container {
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  padding: 20px;
  box-sizing: border-box;
  height: calc(100vh - 84px);

  .card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    height: calc(100vh - 124px);
    box-shadow: 0 0 10px 0 rgba(0, 74, 88, 0.06);
    border-radius: 16px;
    box-sizing: border-box;

    .top {
      height: 32px;
      padding: 30px 35px 35px 24px;

      .topT {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        line-height: 32px;
        text-align: left;
        font-style: normal;
      }
    }

    ::v-deep .commonMenu {
      padding: 0 0 0 0;
    }

    .list {
      width: 100%;
      height: calc(100vh - 310px + 80px);
    }
  }
}
</style>
